<div class="ml-2 md:ml-5 relative w-full max-w-[500px]">
  <!-- Desktop view -->
  <p-iconfield class="w-full sm:flex">
    <p-inputicon styleClass="pi pi-search"/>
    <input
      type="text"
      pInputText
      [(ngModel)]="searchQuery"
      (input)="onSearchInputChange()"
      placeholder="Title, Author, Series, Genre, or ISBN..."
      class="w-full pr-10"
    />
    @if (searchQuery) {
      <p-button
        icon="pi pi-times"
        (click)="clearSearch()"
        [text]="true"
        [rounded]="true"
        class="absolute right-2 top-1/2 -translate-y-1/2 hidden lg:inline-flex"
        aria-label="Clear Search">
      </p-button>
    }
  </p-iconfield>

  <!-- Search results below small screen search input -->
  @if (books.length > 0 || searchQuery) {
    <div
      class="search-dropdown layout-menu w-[300px] sm:w-[600px]"
      [class.show]="(books.length > 0)"
    >
      @if (books.length > 0) {
        @for (book of books; track book) {
          <div class="search-dropdown-item flex flex-col" (click)="onBookClick(book)">
            <div class="flex flex-row w-full p-2">
              <img
                [attr.src]="urlHelper.getThumbnailUrl(book.id, book.metadata?.coverUpdatedOn)"
                alt="Book Cover"
                class="search-book-cover"
              />
              <div class="search-book-details">
                <div class="flex items-center">
                  <p class="search-book-name text font-medium truncate">
                    {{ book.metadata?.title | slice: 0:70 }}
                  </p>
                </div>
                @if (book.metadata?.authors?.length ?? 0 > 0) {
                  <p class="italic text-gray-300">by: {{ getAuthorNames(book.metadata?.authors) }}</p>
                }
              </div>
            </div>
            <p-divider></p-divider>
          </div>
        }
      } @else {
        <div class="search-dropdown-item px-4 py-2">
          <span>No results found</span>
        </div>
      }
    </div>
  }
</div>
